<template>
  <div class="main_body">

    <header class="globalHeader">
        <form class="searchForm" method="get" action="https://www.baidu.com/s">
            <input name="wd" type="text">
            <button type="submit">搜索</button>
        </form>
    </header>
    <main class="globalMain">

      <ul class="siteList">
        <li v-for="item in urlList" :key="item.id">
          <div class="site" @click="openWindows(item.link)">
              <div class="logo">{{item.logo}}</div>
              <div class="link">{{item.link}}</div>
              <div class="close">
              <svg class="icon">
                  <use xlink:href="#icon-close"></use>
              </svg>
              </div>
          </div>
        </li>

        <!-- <li class="last">
            <div class="addButton">
              <div class="icon-wrapper">
                  <svg class="icon">
                      <use xlink:href="#icon-add"></use>
                  </svg>
              </div>
              <div class="text">新增网站</div>
            </div>
        </li> -->
      </ul>

    </main>

  </div>
</template>

<script>
export default {
  data(){
    return{
      urlList:[
        {logo: 'A', link: 'https://www.acfun.cn'},
        {logo: 'B', link: 'https://www.bilibili.com'},
        {logo: 'C', link: 'https://www.cctv.com'},
        {logo: '影', link: 'https://www.613767.com/'},
        {logo: '七', link: 'https://sso.qiniu.com/'},
        {logo: '博', link: 'https://www.csdn.net/'},
        {logo: '知', link: 'https://www.zhihu.com/'},
      ]
  }
},
  methods:{
    openWindows(link){
       window.open(link,"_blank")
      // "_blank"  新打开一个窗口
      // "_self"    覆盖当前的窗口
    }
 }
}
</script>

<style scoped>
@import '../../assets/styles/style.css';

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>